<template>
  <div>
    <!-- -->
    <h3>分类管理</h3>
    <!--    <el-button type="primary" @click="select">查询属性</el-button>-->
    <div class="search">
      分类名称
      <el-input
          v-model="queryParam.name"
          style="width: 240px"
          placeholder="请输入分类名称"
          clearable
      />
      <el-button type="primary" @click="handleSearchAllCate">搜索</el-button>
    </div>
    <div class="add">
      <el-button type="primary" @click="handleAddCate">添加分类</el-button>
    </div>
    <el-table :data="dataList" border style="width: 100%">
      <el-table-column prop="partitionId" label="分类id" width="196" />
      <el-table-column prop="partitionName" label="分类名称" width="220" />
      <el-table-column label="分类层级" width="180">
        <template #default="scope">
          {{scope.row.parentId === 0? '一级分类' : '二级分类' }}
        </template>
      </el-table-column>
      <el-table-column label="父级分类id" width="180">
        <template #default="scope">
         {{scope.row.parentId === 0? '无' : scope.row.parentId }}
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="200" />
<!--      <el-table-column prop="updateTime" label="最后操作时间" width="180" />-->
      <el-table-column label="操作" align="center" width="160">

        <template #default="scope">
<!--          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">-->
<!--            编辑-->
<!--          </el-button>-->
<!--          <el-button size="small" type="warning" @click="handleChangeStatus(scope.$index, scope.row)">-->
<!--            禁用-->
<!--          </el-button>-->
          <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.row)"
          >
            删除
          </el-button>

        </template>
      </el-table-column>
    </el-table>

    <!-- 当点击删除时显示提示框 -->
    <el-dialog
        v-model="dialogVisible"
        title="删除分区"
        width="500"
    >
      <!--      :before-close="handleClose"-->
      <span>你确定要删除id为{{targetData.username}}分区吗？</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handlerConfirm">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>



    <!-- 当点击新增时显示提示框 -->
    <el-dialog
        v-model="addDialogVisible"
        title="新增分区"
        width="500"
    >
      <el-input v-model="cateForm.parentId" placeholder="请输入父分区id"></el-input>
      <el-input v-model="cateForm.partitionName" placeholder="请输入分区名称"></el-input>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="addDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="doInsert()">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>



    <div class="pagination_sign">
      <el-pagination background layout="prev, pager, next"
                     @current-change="handleCurrentChange"
                     v-model:current-page="curPage"
                     v-model:page-size="queryParam.size"
                     :total="total" />
    </div>


  </div>
</template>

<script setup>
import {onMounted, reactive, ref} from 'vue'
import {useRouter} from 'vue-router';

/**
 * 启用禁用账号
 * @param {*} index 当前行的索引
 * @param {*} row 当前行的数据
 */
import {ElMessage} from 'element-plus'
import {categoryPageQuery, deletePartitionById, insertPartition} from "@/api/admin-api.js";

const router = useRouter()



let dataList = ref([])

let total = ref(0)

let curPage = ref(1)


let mockUserData = ref([
  {
    "id":1,
    "name":"张三",
    "username":"zhangsan",
    "password":"113135c1sa3c1sad3dc1",
    "idNumber":"1513165165411",
    "phone":"13211664091",
    "sex":"男",
    "status":1,
    "createTime":"2024-9-4 23:02",
    "updateTime":"2024-9-4 23:02",
    "createUser":"1",
    "updateUser":"1"
  },
])
// 查询操作
// 查询所有分类
let handleSearchAllCate = async () => {
  const res = await getCateData(queryParam)
  // dataList.value = res.data.records
}


let select = () => {
  console.log(curPage.value);
}

/**
 * 页面挂载时获取数据
 */

const queryParam = reactive({
  name:'',
  page:1,
  size:9,
})


const getCateData = async () => {
  // console.log(res.data);
  const res = await categoryPageQuery(queryParam)
  console.log(res)
  total.value = res.data.total
  // 赋值
  dataList.value = res.data.records

}
onMounted( async ()=>{
  // console.log(data.value.name);
//  const res = await axios.get("/users.json")
  await getCateData()
//  console.log(dataList.value.length);
//  total.value = dataList.value.length
})


const handleCurrentChange = async (val) => {

  console.log(`current page: ${val}`)
  queryParam.page = val
  await getCateData()
}








/* 添加分区*/

const cateForm = reactive({
  parentId:0,
  partitionName:'',
})
const addDialogVisible = ref(false)
const handleAddCate = () => {
  /**
   * 接口：/admin/employee/insert  请求体：
   */
  // 跳转到添加分区页面
  // router.push("/admin/addEmployee")
  addDialogVisible.value = true
}
const doInsert = async () => {
  try {
    const res = await insertPartition(cateForm)
    console.log(res);
    ElMessage.success("添加成功")
    addDialogVisible.value = false
    cateForm.partitionName = ''
    // 获取数据
    await getCateData()
  }catch (e) {
    ElMessage.error("添加失败："+e.message)
  }
}



/**
 * 编辑操作
 * @param {*} index
 * @param {*} row
 */
const handleEdit = (index, row) => {
  router.push({
    name:"updateEmployee",
    params:{
      id:row.id
    }
  })
  // console.log(index, row)
}






/**
 * 删除操作
 * @param {*} index
 * @param {*} row
 */
let targetData = ref()
const dialogVisible = ref(false)




/* 确认删除 */
const handlerConfirm = async () =>{
  // targetData 是本条记录
  console.log(targetData.value);
  try {
    // 取出id
    const { partitionId } = targetData.value
    console.log(partitionId);
    // 根据id删除
    const res = await deletePartitionById(partitionId)
    // 关闭弹出框
    dialogVisible.value = false
    console.log("删除成功");
    ElMessage.success("删除成功")
    // 获取数据
    await getCateData()
  }catch (e) {
    ElMessage.error("删除失败："+e.message)
  }
  /**
   * 路径：/admin/employee/{id}
   * return {code,message}
   */
  // const res = await axios.delete("/admin/employee")




  /* 没后端 */


}

const handleDelete = (row) => {
  targetData.value = row
  //删除之前，提示
  dialogVisible.value = true
  // console.log(index, row)
}
</script>
<style lang="scss" scoped>
.search,{
  box-sizing: border-box;
  padding: 10px 0;
}
.add{
  width: 100%;
  display: flex;
  justify-content: flex-end;
  box-sizing: border-box;
  margin-bottom: 10px;
}
.pagination_sign{
  width: 100%;
  position: absolute;
  top: 560px;
  display: flex;
  justify-content: center;
}
</style>
